<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
	<div class="row  border-bottom white-bg dashboard-header">
<!--         <div class="col-sm-12"> -->
<!--             <p>ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。 <a href="http://echarts.baidu.com/doc/about.html" target="_blank">了解更多</a> -->
<!--             </p> -->
<!--             <p>ECharts官网：<a href="http://echarts.baidu.com/" target="_blank">http://echarts.baidu.com/</a> -->
<!--             </p> -->

<!--         </div> -->
        <div class="row" th:if="${user.user.platformRole.toString() == 'Admin'}">
	        <div class="col-sm-offset-5 col-sm-10">
	            <button type="button" class="btn btn-sm btn-danger" onclick="updateReport()" id="btnSubmit" data-loading="正在更新，请稍候..."><i class="fa fa-reply-all"></i>更新报表 </button>
	        </div>
	    </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart2"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart3"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart4"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart5"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart-execount"></div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
	    function updateReport() {
	    	$.modal.loading($("#btnSubmit").data("loading"));
	    	$.ajax({
	            type: "post",
	            url: "/api/report/update",
	    		contentType: 'application/json',
	            data: JSON.stringify({
	                
	            }),
	            success: function(r,r2,e3) {
	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(r.msg);
	            },
	    		error: function(e) {
	                console.log(e);

	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(e.responseText);
	            }
	        });
	    }
    
	    $(function () {
	    	$.ajax({
	            type: "post",
	            url: "/api/report/type/JobTotalDayN/detail",
	    		contentType: 'application/json',
	            data: JSON.stringify({
	                
	            }),
	            success: function(r,r2,e3) {
	            	console.log(r);
	            	console.log(JSON.parse(r.content));
	            	
	            	var jsonarray = JSON.parse(r.content);
	            	
	            	var types = [];
	            	var days = [];	            	
	            	for(j of jsonarray){
	            		for(dataitem of j.data){
	            			if(types.indexOf(dataitem.type) > -1){
	            				continue;
	            			}
	            			types.push(dataitem.type);
	            		}
	            		days.push(j.dt);
        			}
	            	
	            	var reportdatas = [];
	            	for(type of types){
	            		var typedata = {};
	            		typedata.name = type;
	            		typedata.type = 'line';
	            		typedata.data = [];
	            		for(j of jsonarray){
	            			var count = 0;
	            			for(dataitem of j.data){
	            				if(type == dataitem.type){
	            					count += dataitem.count;
	            				} 
	            			}
	            			typedata.data.push(count);
	            		}
	            		reportdatas.push(typedata);
	            	}
	            	
	            	var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
	    	        var lineoption = {
	    	            title : {
	    	                text: '任务总数'
	    	            },
	    	            tooltip : {
	    	                trigger: 'axis'
	    	            },
	    	            legend: {
	    	                data:types //['最高气温','最低气温']
	    	            },
	    	            grid:{
	    	                x:50,
	    	                x2:40,
	    	                y2:24
	    	            },
	    	            calculable : true,
	    	            xAxis : [
	    	                {
	    	                    type : 'category',
	    	                    boundaryGap : false,
	    	                    data : days //['周一','周二','周三','周四','周五','周六','周日']
	    	                }
	    	            ],
	    	            yAxis : [
	    	                {
	    	                    type : 'value',
	    	                    axisLabel : {
	    	                        formatter: '{value}'
	    	                    }
	    	                }
	    	            ],
	    	            series : reportdatas
	    	        };
	    	        lineChart.setOption(lineoption);
	    	        $(window).resize(lineChart.resize);
	            },
	    		error: function(e) {
	                console.log(e);

	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(e.responseText);
	            }
	        });
	    	
	    	$.ajax({
	            type: "post",
	            url: "/api/report/type/JobQueuedDayN/detail",
	    		contentType: 'application/json',
	            data: JSON.stringify({
	                
	            }),
	            success: function(r,r2,e3) {
	            	console.log(r);
	            	console.log(JSON.parse(r.content));
	            	
	            	var jsonarray = JSON.parse(r.content);
	            	
	            	var types = [];
	            	var days = [];	            	
	            	for(j of jsonarray){
	            		for(dataitem of j.data){
	            			if(types.indexOf(dataitem.type) > -1){
	            				continue;
	            			}
	            			types.push(dataitem.type);
	            		}
	            		days.push(j.dt);
        			}
	            	
	            	var reportdatas = [];
	            	for(type of types){
	            		var typedata = {};
	            		typedata.name = type;
	            		typedata.type = 'line';
	            		typedata.data = [];
	            		for(j of jsonarray){
	            			var count = 0;
	            			for(dataitem of j.data){
	            				if(type == dataitem.type){
	            					count += dataitem.count;
	            				} 
	            			}
	            			typedata.data.push(count);
	            		}
	            		reportdatas.push(typedata);
	            	}
	            	
	            	var lineChart = echarts.init(document.getElementById("echarts-line-chart2"));
	    	        var lineoption = {
	    	            title : {
	    	                text: '队列中的任务'
	    	            },
	    	            tooltip : {
	    	                trigger: 'axis'
	    	            },
	    	            legend: {
	    	                data:types //['最高气温','最低气温']
	    	            },
	    	            grid:{
	    	                x:50,
	    	                x2:40,
	    	                y2:24
	    	            },
	    	            calculable : true,
	    	            xAxis : [
	    	                {
	    	                    type : 'category',
	    	                    boundaryGap : false,
	    	                    data : days //['周一','周二','周三','周四','周五','周六','周日']
	    	                }
	    	            ],
	    	            yAxis : [
	    	                {
	    	                    type : 'value',
	    	                    axisLabel : {
	    	                        formatter: '{value}'
	    	                    }
	    	                }
	    	            ],
	    	            series : reportdatas
	    	        };
	    	        lineChart.setOption(lineoption);
	    	        $(window).resize(lineChart.resize);
	            },
	    		error: function(e) {
	                console.log(e);

	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(e.responseText);
	            }
	        });
	    	
	    	$.ajax({
	            type: "post",
	            url: "/api/report/type/JobNoQueuedNoEndDayN/detail",
	    		contentType: 'application/json',
	            data: JSON.stringify({
	                
	            }),
	            success: function(r,r2,e3) {
	            	console.log(r);
	            	console.log(JSON.parse(r.content));
	            	
	            	var jsonarray = JSON.parse(r.content);
	            	
	            	var types = [];
	            	var days = [];	            	
	            	for(j of jsonarray){
	            		for(dataitem of j.data){
	            			if(types.indexOf(dataitem.type) > -1){
	            				continue;
	            			}
	            			types.push(dataitem.type);
	            		}
	            		days.push(j.dt);
        			}
	            	
	            	var reportdatas = [];
	            	for(type of types){
	            		var typedata = {};
	            		typedata.name = type;
	            		typedata.type = 'line';
	            		typedata.data = [];
	            		for(j of jsonarray){
	            			var count = 0;
	            			for(dataitem of j.data){
	            				if(type == dataitem.type){
	            					count += dataitem.count;
	            				} 
	            			}
	            			typedata.data.push(count);
	            		}
	            		reportdatas.push(typedata);
	            	}
	            	
	            	var lineChart = echarts.init(document.getElementById("echarts-line-chart3"));
	    	        var lineoption = {
	    	            title : {
	    	                text: '未队列未结束的任务'
	    	            },
	    	            tooltip : {
	    	                trigger: 'axis'
	    	            },
	    	            legend: {
	    	                data:types //['最高气温','最低气温']
	    	            },
	    	            grid:{
	    	                x:50,
	    	                x2:40,
	    	                y2:24
	    	            },
	    	            calculable : true,
	    	            xAxis : [
	    	                {
	    	                    type : 'category',
	    	                    boundaryGap : false,
	    	                    data : days //['周一','周二','周三','周四','周五','周六','周日']
	    	                }
	    	            ],
	    	            yAxis : [
	    	                {
	    	                    type : 'value',
	    	                    axisLabel : {
	    	                        formatter: '{value}'
	    	                    }
	    	                }
	    	            ],
	    	            series : reportdatas
	    	        };
	    	        lineChart.setOption(lineoption);
	    	        $(window).resize(lineChart.resize);
	            },
	    		error: function(e) {
	                console.log(e);

	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(e.responseText);
	            }
	        });
	    	
	    	$.ajax({
	            type: "post",
	            url: "/api/report/type/JobEndLastExecuteSuccessDayN/detail",
	    		contentType: 'application/json',
	            data: JSON.stringify({
	                
	            }),
	            success: function(r,r2,e3) {
	            	console.log(r);
	            	console.log(JSON.parse(r.content));
	            	
	            	var jsonarray = JSON.parse(r.content);
	            	
	            	var types = [];
	            	var days = [];	            	
	            	for(j of jsonarray){
	            		for(dataitem of j.data){
	            			if(types.indexOf(dataitem.type) > -1){
	            				continue;
	            			}
	            			types.push(dataitem.type);
	            		}
	            		days.push(j.dt);
        			}
	            	
	            	var reportdatas = [];
	            	for(type of types){
	            		var typedata = {};
	            		typedata.name = type;
	            		typedata.type = 'line';
	            		typedata.data = [];
	            		for(j of jsonarray){
	            			var count = 0;
	            			for(dataitem of j.data){
	            				if(type == dataitem.type){
	            					count += dataitem.count;
	            				} 
	            			}
	            			typedata.data.push(count);
	            		}
	            		reportdatas.push(typedata);
	            	}
	            	
	            	var lineChart = echarts.init(document.getElementById("echarts-line-chart4"));
	    	        var lineoption = {
	    	            title : {
	    	                text: '已结束已成功的任务'
	    	            },
	    	            tooltip : {
	    	                trigger: 'axis'
	    	            },
	    	            legend: {
	    	                data:types //['最高气温','最低气温']
	    	            },
	    	            grid:{
	    	                x:50,
	    	                x2:40,
	    	                y2:24
	    	            },
	    	            calculable : true,
	    	            xAxis : [
	    	                {
	    	                    type : 'category',
	    	                    boundaryGap : false,
	    	                    data : days //['周一','周二','周三','周四','周五','周六','周日']
	    	                }
	    	            ],
	    	            yAxis : [
	    	                {
	    	                    type : 'value',
	    	                    axisLabel : {
	    	                        formatter: '{value}'
	    	                    }
	    	                }
	    	            ],
	    	            series : reportdatas
	    	        };
	    	        lineChart.setOption(lineoption);
	    	        $(window).resize(lineChart.resize);
	            },
	    		error: function(e) {
	                console.log(e);

	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(e.responseText);
	            }
	        });
	    	
	    	$.ajax({
	            type: "post",
	            url: "/api/report/type/JobEndLastExecuteFailedDayN/detail",
	    		contentType: 'application/json',
	            data: JSON.stringify({
	                
	            }),
	            success: function(r,r2,e3) {
	            	console.log(r);
	            	console.log(JSON.parse(r.content));
	            	
	            	var jsonarray = JSON.parse(r.content);
	            	
	            	var types = [];
	            	var days = [];	            	
	            	for(j of jsonarray){
	            		for(dataitem of j.data){
	            			if(types.indexOf(dataitem.type) > -1){
	            				continue;
	            			}
	            			types.push(dataitem.type);
	            		}
	            		days.push(j.dt);
        			}
	            	
	            	var reportdatas = [];
	            	for(type of types){
	            		var typedata = {};
	            		typedata.name = type;
	            		typedata.type = 'line';
	            		typedata.data = [];
	            		for(j of jsonarray){
	            			var count = 0;
	            			for(dataitem of j.data){
	            				if(type == dataitem.type){
	            					count += dataitem.count;
	            				} 
	            			}
	            			typedata.data.push(count);
	            		}
	            		reportdatas.push(typedata);
	            	}
	            	
	            	var lineChart = echarts.init(document.getElementById("echarts-line-chart5"));
	    	        var lineoption = {
	    	            title : {
	    	                text: '已结束未成功的任务'
	    	            },
	    	            tooltip : {
	    	                trigger: 'axis'
	    	            },
	    	            legend: {
	    	                data:types //['最高气温','最低气温']
	    	            },
	    	            grid:{
	    	                x:50,
	    	                x2:40,
	    	                y2:24
	    	            },
	    	            calculable : true,
	    	            xAxis : [
	    	                {
	    	                    type : 'category',
	    	                    boundaryGap : false,
	    	                    data : days //['周一','周二','周三','周四','周五','周六','周日']
	    	                }
	    	            ],
	    	            yAxis : [
	    	                {
	    	                    type : 'value',
	    	                    axisLabel : {
	    	                        formatter: '{value}'
	    	                    }
	    	                }
	    	            ],
	    	            series : reportdatas
	    	        };
	    	        lineChart.setOption(lineoption);
	    	        $(window).resize(lineChart.resize);
	            },
	    		error: function(e) {
	                console.log(e);

	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(e.responseText);
	            }
	        });
	
	    	$.ajax({
	            type: "post",
	            url: "/api/report/type/JobExecuteRecordTotalDayN/detail",
	    		contentType: 'application/json',
	            data: JSON.stringify({
	                
	            }),
	            success: function(r,r2,e3) {
	            	console.log(r);
	            	console.log(JSON.parse(r.content));
	            	
	            	var jsonarray = JSON.parse(r.content);
	            	
	            	var types = [];
	            	var days = [];	            	
	            	for(j of jsonarray){
	            		for(dataitem of j.data){
	            			var typedesc = dataitem.type + (dataitem.success?'成功':'失败');
	            			if(types.indexOf(typedesc) > -1){
	            				continue;
	            			}
	            			types.push(typedesc);
	            		}
	            		days.push(j.dt);
        			}
	            	
	            	var reportdatas = [];
	            	for(type of types){
	            		var typedata = {};
	            		typedata.name = type;
	            		typedata.type = 'line';
	            		typedata.data = [];
	            		for(j of jsonarray){
	            			var count = 0;
	            			for(dataitem of j.data){
	            				var typedesc = dataitem.type + (dataitem.success?'成功':'失败');
	            				if(type == typedesc){
	            					count += dataitem.count;
	            				} 
	            			}
	            			typedata.data.push(count);
	            		}
	            		reportdatas.push(typedata);
	            	}
	            	
	            	var lineChart = echarts.init(document.getElementById("echarts-line-chart-execount"));
	    	        var lineoption = {
	    	            title : {
	    	                text: '累计执行次数'
	    	            },
	    	            tooltip : {
	    	                trigger: 'axis'
	    	            },
	    	            legend: {
	    	                data:types //['最高气温','最低气温']
	    	            },
	    	            grid:{
	    	                x:50,
	    	                x2:40,
	    	                y2:24
	    	            },
	    	            calculable : true,
	    	            xAxis : [
	    	                {
	    	                    type : 'category',
	    	                    boundaryGap : false,
	    	                    data : days //['周一','周二','周三','周四','周五','周六','周日']
	    	                }
	    	            ],
	    	            yAxis : [
	    	                {
	    	                    type : 'value',
	    	                    axisLabel : {
	    	                        formatter: '{value}'
	    	                    }
	    	                }
	    	            ],
	    	            series : reportdatas
	    	        };
	    	        lineChart.setOption(lineoption);
	    	        $(window).resize(lineChart.resize);
	            },
	    		error: function(e) {
	                console.log(e);

	            	$.modal.closeLoading();
	            	$('.imgcode').click();
	            	$(".code").val("");
	            	$.modal.msg(e.responseText);
	            }
	        });
	
	    });
    </script>
</body>
</html>